<template>
  <div
    class="cash-coupon common-page"
    style="margin-bottom:env(safe-area-inset-bottom);margin-bottom:constant(safe-area-inset-bottom"
  >
    <van-list
      :immediate-check="false"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getList"
      v-if='list.length'
      style="margin-bottom:50px;"
    >
      <div class="list">
        <box-cash-coupon-item
          :cashCouponInfo="item"
          v-for='(item,index) in list'
          :key="index"
        ></box-cash-coupon-item>
      </div>
    </van-list>
    <empty-data
      description="空空如也~"
      :emptyImg="emptyImg"
      v-if='!list.length'
    ></empty-data>
  </div>
</template>

<script>
import store from "@/store";
import { mapGetters } from "vuex";
import { List } from "vant";
import BoxCashCouponItem from "@/components/BoxCashCouponItem";
import EmptyData from "@/components/EmptyData";
import apiCash from "@/common/api/apiCash";
import Exchange from "./mixin/exchange";
import Share from "./mixin/share";

export default {
  name: "BoxCashCoupon",
  components: {
    [List.name]: List,
    [BoxCashCouponItem.name]: BoxCashCouponItem,
    [EmptyData.name]: EmptyData,
  },
  mixins: [Exchange, Share],
  data() {
    return {
      emptyImg:
        "http://alivod.sdxgxx.cn/image/default/805FA0987DC9499D957BB7FF046D958C-6-2.png",
      list: [],
      loading: false,
      finished: false,
      count: 10,
      pageNum: 1,
      currCashInfo: {},
      token: "",
      userList: [],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.getList();
    this.setShare();
  },
  mounted() {},
  methods: {
    // 获取现金券列表
    getList() {
      this.$toast.loading();
      apiCash
        .getAllCouponList({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.loading = false;
          this.finished = true;
          if (!data.data) {
            return;
          }
          this.list = data.data;
        });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.cash-coupon {
  min-height: 100vh;
  box-sizing: border-box;
}
.list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;

  .cash-coupon-item {
    margin-bottom: 24px;
  }
}
</style>